/**
 * Created by jiangtao on 2017/6/1.
 */


import React , { Component } from 'react';

import CustomLink from './../components/CustomLink';


export default class Pagination extends Component{
    constructor(){
        super();
    }

    static defaultProps = {
        currentPage:1,
        pageTotal:100,
        step:5,
        category:'all'
    }

    renderPage(){

        const {
            step,
            category,
            pageTotal ,
            currentPage
        } = this.props;


        let start = 1,
            end = step,
            nodes = [],
            showEnd = true;

        if( currentPage >= 4 ) {
            start = currentPage - 2;
            end = currentPage + 2;
            nodes.push(
                <li key={0}>
                    <a>...</a>
                </li>
            )
        }

        if( currentPage + 3 >= pageTotal ) {
            end = pageTotal;
            showEnd = false;
        }

        for( let i = start ; i <= end ; i++ ) {
            nodes.push(
                <li key={i}>
                    <CustomLink to={`/topcs/${category}/${i}`}>
                        {i}
                    </CustomLink>
                </li>
            );
        }

        showEnd && nodes.push(
            <li key={pageTotal}>
                <a>...</a>
            </li>
        );

        return nodes;
    }

    render(){
        const { category } = this.props;
        return(
            <nav aria-label="Page navigation">
                <ul className="pagination">
                    <li>
                        <CustomLink to={`/topcs/${category}/1`}>
                            <span>&laquo;</span>
                        </CustomLink>
                    </li>
                    {this.renderPage()}
                    <li>
                        <CustomLink to={`/topcs/${category}/100`}>
                            <span>&raquo;</span>
                        </CustomLink>
                    </li>
                </ul>
            </nav>
        )
    }

}
